<template>
    <div>
      <div class="chart" id="oneChart"></div>
    </div>
  </template>
  
  <script>
  import { inject, onMounted, reactive } from "vue";
  // import drawRader from './itemThree.vue'
  export default {
    setup() {
      // 引入echarts
      let $echarts = inject("echarts");
      let $http = inject("axios");
      // 数据接收
      let oneData = reactive({});
      let xData = reactive([]);
      let yData = reactive([]);
      function setData() {
        xData = oneData.data.chartData.chartData.map((v) => v.title)
        yData = oneData.data.chartData.chartData.map((v) => v.num);
        console.log(xData);
        console.log(yData);
      }
      async function getState() {
        oneData = await $http({ url: "/one/data" });
      }
      onMounted(() => {
        // 初始化echarts
        let myChart = $echarts.init(document.getElementById("oneChart"));
        getState().then(() => {
          setData();
          myChart.setOption({
            
            xAxis: {
              type: "value",
            },
            yAxis: {
              type: "category",
              data: xData,
            },
            series: [
              {
                data: yData,
                type: "bar",
              },
            ],
          });
          window.onresize = myChart.resize;
        });
      });
      return {
        getState,
        oneData,
        xData,
        yData,
        setData,
      };
    },
  };
  </script>
  
  <style lang="css" scoped>
  .chart {
    height: 400px;
  }
  </style>